/**
 * Menu 组件的主题配置
 * 
 * 基于企业级设计规范 (Menu.json) 的完整配置
 * 包含所有菜单样式定义
 */

import type { ComponentToken } from 'antd/es/menu/style';

// ========== 设计 Token 常量 ==========

/**
 * 基础样式相关 Token
 */
const BASIC_TOKENS = {
  dropdownWidth: 160,
  zIndexPopup: 1050,
  collapsedWidth: 80,
  popupBg: '#ffffff',
} as const;

/**
 * 菜单项相关 Token
 */
const ITEM_TOKENS = {
  height: 40,
  marginInline: 4,
  marginBlock: 4,
  paddingInline: 16,
  borderRadius: 8,
  horizontalBorderRadius: 0,
  horizontalLineHeight: '46px',
} as const;

/**
 * 子菜单项相关 Token
 */
const SUB_MENU_TOKENS = {
  itemBorderRadius: 4,
  itemBg: '#fafafa',
} as const;

/**
 * 默认颜色相关 Token
 */
const COLOR_TOKENS = {
  itemColor: '#1a1a1a',
  itemHoverColor: '#1a1a1a',
  itemSelectedColor: '#1890ff',
  itemBg: '#ffffff',
  itemHoverBg: 'rgba(0, 0, 0, 0.06)',
  itemActiveBg: '#e6f4ff',
  itemSelectedBg: '#e6f4ff',
  itemDisabledColor: 'rgba(0, 0, 0, 0.25)',
} as const;

/**
 * 水平菜单相关 Token
 */
const HORIZONTAL_TOKENS = {
  itemHoverColor: '#1890ff',
  itemSelectedColor: '#1890ff',
  itemSelectedBg: 'transparent',
  itemHoverBg: 'transparent',
} as const;

/**
 * 危险项相关 Token
 */
const DANGER_TOKENS = {
  itemColor: '#ff4d4f',
  itemHoverColor: '#ff4d4f',
  itemSelectedColor: '#ff4d4f',
  itemActiveBg: '#fff2f0',
  itemSelectedBg: '#fff2f0',
} as const;

/**
 * 分组相关 Token
 */
const GROUP_TOKENS = {
  titleColor: 'rgba(0, 0, 0, 0.45)',
  titleLineHeight: 1.5714285714285714,
  titleFontSize: 14,
} as const;

/**
 * 激活条相关 Token
 */
const ACTIVE_BAR_TOKENS = {
  width: 0,
  height: 2,
  borderWidth: 1,
} as const;

/**
 * 图标相关 Token
 */
const ICON_TOKENS = {
  size: 14,
  marginInlineEnd: 12,
  collapsedSize: 16,
} as const;

/**
 * 暗色主题相关 Token
 */
const DARK_TOKENS = {
  itemColor: 'rgba(255, 255, 255, 0.65)',
  itemBg: '#001529',
  popupBg: '#001529',
  subMenuItemBg: '#000c17',
  itemSelectedColor: '#ffffff',
  itemSelectedBg: '#1890ff',
  itemHoverBg: 'transparent',
  itemHoverColor: '#ffffff',
  groupTitleColor: 'rgba(255, 255, 255, 0.65)',
  itemDisabledColor: 'rgba(255, 255, 255, 0.25)',
  
  // 暗色危险项
  dangerItemColor: '#ff4d4f',
  dangerItemHoverColor: '#ff7875',
  dangerItemSelectedBg: '#ff4d4f',
  dangerItemSelectedColor: '#ffffff',
  dangerItemActiveBg: '#ff4d4f',
} as const;

/**
 * Menu 完整主题配置
 * 
 * 根据设计规范文件 Menu.json 定义的企业级菜单样式
 * 涵盖所有菜单类型、状态和主题的完整配置
 * 
 * @example
 * ```tsx
 * <ConfigProvider theme={{ components: { Menu: menuThemeConfig } }}>
 *   <Menu mode="vertical" defaultSelectedKeys={['1']}>
 *     <Menu.Item key="1">菜单项 1</Menu.Item>
 *     <Menu.Item key="2">菜单项 2</Menu.Item>
 *     <Menu.SubMenu key="sub1" title="子菜单">
 *       <Menu.Item key="3">子菜单项 1</Menu.Item>
 *     </Menu.SubMenu>
 *   </Menu>
 *   
 *   <Menu mode="horizontal">
 *     <Menu.Item key="mail">导航 1</Menu.Item>
 *     <Menu.Item key="app">导航 2</Menu.Item>
 *   </Menu>
 * </ConfigProvider>
 * ```
 */
export const menuThemeConfig: Partial<ComponentToken> = {
  // ========== 基础样式配置 ==========
  dropdownWidth: BASIC_TOKENS.dropdownWidth,
  zIndexPopup: BASIC_TOKENS.zIndexPopup,
  collapsedWidth: BASIC_TOKENS.collapsedWidth,
  popupBg: BASIC_TOKENS.popupBg,
  
  // ========== 菜单项配置 ==========
  itemHeight: ITEM_TOKENS.height,
  itemMarginInline: ITEM_TOKENS.marginInline,
  itemMarginBlock: ITEM_TOKENS.marginBlock,
  itemPaddingInline: ITEM_TOKENS.paddingInline,
  itemBorderRadius: ITEM_TOKENS.borderRadius,
  horizontalItemBorderRadius: ITEM_TOKENS.horizontalBorderRadius,
  horizontalLineHeight: ITEM_TOKENS.horizontalLineHeight,
  
  // ========== 子菜单项配置 ==========
  subMenuItemBorderRadius: SUB_MENU_TOKENS.itemBorderRadius,
  
  // ========== 颜色配置 ==========
  itemColor: COLOR_TOKENS.itemColor,
  itemHoverColor: COLOR_TOKENS.itemHoverColor,
  itemSelectedColor: COLOR_TOKENS.itemSelectedColor,
  itemBg: COLOR_TOKENS.itemBg,
  itemHoverBg: COLOR_TOKENS.itemHoverBg,
  itemActiveBg: COLOR_TOKENS.itemActiveBg,
  itemSelectedBg: COLOR_TOKENS.itemSelectedBg,
  
  // ========== 水平菜单配置 ==========
  horizontalItemHoverColor: HORIZONTAL_TOKENS.itemHoverColor,
  horizontalItemSelectedColor: HORIZONTAL_TOKENS.itemSelectedColor,
  horizontalItemSelectedBg: HORIZONTAL_TOKENS.itemSelectedBg,
  horizontalItemHoverBg: HORIZONTAL_TOKENS.itemHoverBg,
  
  // ========== 危险项配置 ==========
  dangerItemColor: DANGER_TOKENS.itemColor,
  dangerItemHoverColor: DANGER_TOKENS.itemHoverColor,
  dangerItemSelectedColor: DANGER_TOKENS.itemSelectedColor,
  dangerItemActiveBg: DANGER_TOKENS.itemActiveBg,
  dangerItemSelectedBg: DANGER_TOKENS.itemSelectedBg,
  
  // ========== 分组配置 ==========
  groupTitleColor: GROUP_TOKENS.titleColor,
  groupTitleLineHeight: GROUP_TOKENS.titleLineHeight,
  groupTitleFontSize: GROUP_TOKENS.titleFontSize,
  
  // ========== 激活条配置 ==========
  activeBarWidth: ACTIVE_BAR_TOKENS.width,
  activeBarHeight: ACTIVE_BAR_TOKENS.height,
  activeBarBorderWidth: ACTIVE_BAR_TOKENS.borderWidth,
  
  // ========== 图标配置 ==========
  iconSize: ICON_TOKENS.size,
  iconMarginInlineEnd: ICON_TOKENS.marginInlineEnd,
  collapsedIconSize: ICON_TOKENS.collapsedSize,
  
  // ========== 暗色主题配置 ==========
  darkItemColor: DARK_TOKENS.itemColor,
  darkItemBg: DARK_TOKENS.itemBg,
  darkPopupBg: DARK_TOKENS.popupBg,
  darkSubMenuItemBg: DARK_TOKENS.subMenuItemBg,
  darkItemSelectedColor: DARK_TOKENS.itemSelectedColor,
  darkItemSelectedBg: DARK_TOKENS.itemSelectedBg,
  darkItemHoverBg: DARK_TOKENS.itemHoverBg,
  darkItemHoverColor: DARK_TOKENS.itemHoverColor,
  darkGroupTitleColor: DARK_TOKENS.groupTitleColor,
  
  // ========== 暗色危险项配置 ==========
  darkDangerItemColor: DARK_TOKENS.dangerItemColor,
  darkDangerItemHoverColor: DARK_TOKENS.dangerItemHoverColor,
  darkDangerItemSelectedBg: DARK_TOKENS.dangerItemSelectedBg,
  darkDangerItemSelectedColor: DARK_TOKENS.dangerItemSelectedColor,
  darkDangerItemActiveBg: DARK_TOKENS.dangerItemActiveBg,
};

/**
 * 获取 Menu 主题配置
 * 
 * 支持部分覆盖默认配置，可以基于完整的设计规范进行定制
 * 
 * @param customConfig 自定义配置（可选）
 * @returns 合并后的主题配置
 * 
 * @example
 * ```tsx
 * // 基于设计规范的定制
 * const myMenuTheme = getMenuTheme({
 *   itemSelectedColor: '#ff6b35',      // 自定义选中颜色
 *   itemSelectedBg: '#ffe7d9',         // 自定义选中背景色
 *   itemHeight: 48,                    // 自定义菜单项高度
 * });
 * 
 * <ConfigProvider theme={{ components: { Menu: myMenuTheme } }}>
 *   <Menu>
 *     <Menu.Item key="1">菜单项</Menu.Item>
 *   </Menu>
 * </ConfigProvider>
 * ```
 */
export const getMenuTheme = (
  customConfig?: Partial<ComponentToken>
): Partial<ComponentToken> => {
  return {
    ...menuThemeConfig,
    ...customConfig,
  };
};

/**
 * 导出 Menu 组件的 Token 类型
 * 方便 TypeScript 类型检查和开发时的智能提示
 */
export type { ComponentToken as MenuComponentToken } from 'antd/es/menu/style';

